<template>
	<view class="content">

		<view id='contentView'>

			<view class="page-body">
				<view class="page-section page-section-gap">
					<map id="myMap" style="width: 100%; height: 300px;" scale='18' :latitude="latitude"
						:longitude="longitude" :markers="covers" @regionchange="regionchange">
					</map>
				</view>
			</view>


			<view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="propertyBox">

							<view class="uni-list-cell-left">
								<h4>当前课程:</h4>
							</view>
							<view class="uni-list-cell-db">
								<picker @change="bindPickerChange" :value="courseIndex" :range="array">
									<view class="uni-input">{{array[courseIndex]}}</view>
								</picker>
							</view>

						</view>

					</view>
				</view>
			</view>
			<h4>定位地址: {{this.addressListZ1}}</h4>

			</h4>
			<h4>当前打卡范围: {{scope}}米</h4>
			<h4>当前计划上课人数:{{planNumber}} 人</h4>
			<h4>当前已签到人数: {{punchCardNumber}} 人</h4>

			<view class="propertyBox">
				<h4>每周打卡时间:</h4>

				<view class="uni-list-cell-db">

					<view class="propertyBox">
						<h4>星期</h4>
						<picker @change="WeekbindPickerChange" :value="timeIndex" :range="timeArray">
							<view class="uni-input">{{timeArray[index]}}</view>
						</picker>
					</view>

				</view>

				<h4>时间:</h4>
				<view class="uni-list-cell-db">
					<picker mode="time" :value="time" @change="bindTimeChange">
						<view class="uni-input">{{time}}</view>
					</picker>
				</view>

			</view>

			<h4>当前学生打卡情况:</h4>
			<view style='background-color:antiquewhite' class="uni-padding-wrap uni-common-mt">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view v-for="item in sutdentPunchCardInfo">姓名：{{item.userName}}-打卡情况：{{item.ifPunchCard}}</view>
				</scroll-view>
			</view>

			<button type="default" @click="deleteCourse">删除当前课程</button>

			<button type="default" @click="createCouse">创建新的课程</button>


		</view>


		<view id='buttomNavigation'>



			<!-- 这是老师的页面 -->
			<view class="nav" @click="()=>{clickNavi('管理课程')}"><uni-icons type="checkmarkempty" color="#007aff" />管理课程</view>
			<view class="nav" @click="()=>{clickNavi('管理学生')}">管理学生</view>
			<view class="nav" @click="()=>{clickNavi('个人信息')}">个人信息</view>|




		</view>
	</view>
</template>

<script>
	var self, mapCtx
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				addressListZ1: '测试',
				latitude: 39.909001165008085,
				longitude: 116.39742205097009,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}],
				scope: 0,
				planNumber: 0,
				punchCardNumber: 0,
				punchCardStudentInfo: [],
				index: 0,
				courseList: [],
				array: ['数据等待加载'],
				sutdentPunchCardInfo: [],
				resCopy: [],
				courseIndex: 0,
				timeIndex: 0,
				timeArray: ['一', '二', '三', '四', '五', '六', '天'],
				time: '09:01',
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		onLoad() {
			// 这里应该是尝试拉取数据的地方
			console.log("当前尝试拉取数据");
			// 获取当前map
			mapCtx = wx.createMapContext('myMap')


			uni.request({
				url: uni.getStorageSync('serviceIp') + '/teacher/getAllCourse',
				method: 'POST',
				header: {
					'user': uni.getStorageSync("user")
				},
				//请求成功后返回
				success: (res) => {
					// 请求成功之后将数据给Info

					if (res.data.status) {


						this.courseList = res.data.data;
						let courseName = [];
						console.log('res.data.data.forEach', res);
						res.data.data.forEach(item => {

							courseName.push(item.courseInfo.courseName);

						})

						/**
						 * 这里赋值第一个课
						 * 
						 */
						this.array = courseName;

						this.updateCourse(0, res);
						this.resCopy = res;


					} else {

						uni.showToast({
							title: '获取课程失败!',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'error',
							//显示持续时间为 2秒
							duration: 2000
						})

					}



				},
				fail: (res) => {
					console.log("查看fail返回的信息,", res);
				}
			});

		},
		onShow() {
			uni.hideTabBar({});
			this.getPosition();
			uni.request({
				url: uni.getStorageSync('serviceIp') + '/teacher/getAllCourse',
				method: 'POST',
				header: {
					'user': uni.getStorageSync("user")
				},
				//请求成功后返回
				success: (res) => {
					// 请求成功之后将数据给Info

					if (res.data.status) {


						this.courseList = res.data.data;
						let courseName = [];
						console.log('res.data.data.forEach', res);
						res.data.data.forEach(item => {

							courseName.push(item.courseInfo.courseName);

						})

						/**
						 * 这里赋值第一个课
						 * 
						 */
						this.array = courseName;

						this.updateCourse(0, res);
						this.resCopy = res;


					} else {

						uni.showToast({
							title: '获取课程失败!',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'error',
							//显示持续时间为 2秒
							duration: 2000
						})

					}



				},
				fail: (res) => {
					console.log("查看fail返回的信息,", res);
				}
			});

		},
		methods: {
			WeekbindPickerChange(e){
				this.index=e.target.value;
			},
			deleteCourse() {

				uni.request({
					url: uni.getStorageSync('serviceIp') + '/teacher/deleteCourse',
					method: 'DELETE',
					header: {
						'user': uni.getStorageSync("user")
					},
					data: {
						courseId: this.resCopy.data.data[this.index].courseInfo.courseId,
					},
					//请求成功后返回
					success: (res) => {
						// 请求成功之后将数据给Info

						if (res.data.status) {

                            
                            uni.request({
                            	url: uni.getStorageSync('serviceIp') + '/teacher/getAllCourse',
                            	method: 'POST',
                            	header: {
                            		'user': uni.getStorageSync("user")
                            	},
                            	//请求成功后返回
                            	success: (res) => {
                            		// 请求成功之后将数据给Info
                            
                            		if (res.data.status) {
                            
                            
                            			this.courseList = res.data.data;
                            			let courseName = [];
                            			console.log('res.data.data.forEach', res);
                            			res.data.data.forEach(item => {
                            
                            				courseName.push(item.courseInfo.courseName);
                            
                            			})
                            
                            			/**
                            			 * 这里赋值第一个课
                            			 * 
                            			 */
                            			this.array = courseName;
                            
                            			this.updateCourse(0, res);
                            			this.resCopy = res;
                            
                            
                            		} else {
                            
                            			uni.showToast({
                            				title: '获取课程失败!',
                            				//将值设置为 success 或者直接不用写icon这个参数
                            				icon: 'error',
                            				//显示持续时间为 2秒
                            				duration: 2000
                            			})
                            
                            		}
                            
                            
                            
                            	},
                            	fail: (res) => {
                            		console.log("查看fail返回的信息,", res);
                            	}
                            });
							

							uni.showToast({
								title: '删除成功!',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000
							})

						} else {

							uni.showToast({
								title: '删除课程失败!',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})

						}



					},
					fail: (res) => {
						console.log("查看fail返回的信息,", res);
					}
				});


			},
			updateCourse(e, res) {
				console.log('updateCourse res', res, e);

				this.scope = res.data.data[e].courseInfo.punchCardScope;

				this.planNumber = res.data.data[e].punchCardStudentPlanInfo.length;
				this.punchCardNumber = res.data.data[e].punchCardStudentInfo.length;

				this.latitude = res.data.data[e].courseInfo.latitude;
				this.longitude = res.data.data[e].courseInfo.longitude;

				this.covers[0].latitude = res.data.data[e].courseInfo.latitude;
				this.covers[0].longitude = res.data.data[e].courseInfo.longitude;

				console.log('res.data.data[e].latitude', res.data.data[e].courseInfo.latitude, res.data.data[e].courseInfo
					.longitude);

				this.timeIndex = res.data.data[e].courseInfo.length;
				this.time = res.data.data[e].courseInfo.punchCardDate;

				let punchCardInfo = [];
				res.data.data[e].punchCardStudentPlanInfo.forEach(item => {
					let sgin = false;

					res.data.data[e].punchCardStudentInfo.forEach(item2 => {
						if (item2.userName == item.userName) {
							sgin = true;
						}
					})

					let itemA = {
						...item,
						ifPunchCard: sgin
					}

					punchCardInfo.push(itemA);
				});

				this.sutdentPunchCardInfo = punchCardInfo;


				console.log('res', res);

			},
			bindTimeChange(e) {
				console.log(e);
				this.time = e.target.value;
			},
			createCouse(e) {
				console.log("触发创建新课程功能");

				uni.switchTab({
					url: 'createCourseNew',
					success: (res) => {
						// #ifdef APP-PLUS
						let page = getCurrentPages().pop(); //跳转页面成功之后
						if (!page) return;
						// page.loadData(); //如果页面存在，则重新刷新页面
						console.log("触发页面刷新");
						// #endif 
					}
				});

			},
			upper(e) {

			},
			scroll(e) {

			},
			lower(e) {

			},
			CutLocation(e) {
				console.log('触发切换定位');
			},
			regionchange(event) {
				console.log('regionchange', event)
				if (event.type == 'regionchange') {
					this.getCenterLanLat()
				}

			},
			getCenterLanLat() {
				this.mapContext = uni.createMapContext("myMap", this);


				this.mapContext.getCenterLocation({
					type: 'wgs84',
					success: (res) => {
						let address = {
							latitude: res.latitude,
							longitude: res.longitude
						}
						this.longitude = address.longitude;
						this.latitude = address.latitude;

						// 创建地图坐标对象
						var point = new plus.maps.Point(address.longitude, address.latitude);
						//静态方法，反向地理编码
						plus.maps.Map.reverseGeocode(point, {}, (event) => {
								var address = event.address; // 转换后的地理位置
								var point = event.coord; // 转换后的坐标信息
								var coordType = event.coordType; // 转换后的坐标系类型
								var reg = /.+?(省|市|自治区|自治州|县|区)/g;
								var addressList = address.match(reg).toString().split(",");
								//注意 因为存在直辖市， 当所在地区为普通省市时，addressList.length == 3，city = addressList[1];当所在地区为直辖市时addressList.length == 2，city = addressList[0];
								let city = addressList.length == 3 ? addressList[1] : addressList[0];

								let CityString = '';

								addressList.forEach(item => {
									CityString = CityString + item + "-";
								});
								this.addressListZ1 = CityString;

								console.log("addressList", addressList, this.addressListZ1);

							},
							function(e) {
								console.log("失败回调", e);
							}
						);


						this.covers[0].longitude = address.longitude;
						this.covers[0].latitude = address.latitude;


						this.$emit('longLatDetail', address)
						console.log('已经更新完数据')
					},
					fail: (err) => {


					}
				})
			},
			getPosition() {
				const that = this;
				uni.getLocation({
					type: 'wgs84',
					geocode: true, //设
					success: function(lb) {
						console.log("位置信息", lb);
						console.log('当前位置的经度：' + lb.longitude);
						console.log('当前位置的纬度：' + lb.latitude);
						that.latitude = lb.latitude;
						that.longitude = lb.longitude;
						console.log(lb.longitude, lb.latitude);


						// 创建地图坐标对象
						var point = new plus.maps.Point(lb.longitude, lb.latitude);
						//静态方法，反向地理编码
						plus.maps.Map.reverseGeocode(point, {}, (event) => {
								var address = event.address; // 转换后的地理位置
								var point = event.coord; // 转换后的坐标信息
								var coordType = event.coordType; // 转换后的坐标系类型
								var reg = /.+?(省|市|自治区|自治州|县|区)/g;
								var addressList = address.match(reg).toString().split(",");
								//注意 因为存在直辖市， 当所在地区为普通省市时，addressList.length == 3，city = addressList[1];当所在地区为直辖市时addressList.length == 2，city = addressList[0];
								let city = addressList.length == 3 ? addressList[1] : addressList[0];

								let CityString = '';

								addressList.forEach(item => {
									CityString = CityString + item + "-";
								});
								that.addressListZ1 = CityString;

								console.log("addressList", addressList, that.addressListZ1);

							},
							function(e) {
								console.log("失败回调", e);
							}
						);


						that.covers[0].latitude = lb.latitude;
						that.covers[0].longitude = lb.longitude;
					},
				})
			},
			clickNavi(e) {

				console.log('查看当前点击事件', e);

				if (e == '个人信息') {

					uni.switchTab({
						url: 'userInfo'
					});


				} else if (e == '管理课程') {


					console.log("触发管理课程动作");

					uni.switchTab({
						url: 'createCouse',
						success: (res) => {
							// #ifdef APP-PLUS
							let page = getCurrentPages().pop(); //跳转页面成功之后
							if (!page) return;
							// page.loadData(); //如果页面存在，则重新刷新页面
							console.log("触发页面刷新");
							// #endif 
						}
					});

				} else if (e == '管理学生') {


					console.log("触发管理学生动作");

					uni.switchTab({
						url: 'couseStudentAdmin',
						success: (res) => {
							// #ifdef APP-PLUS
							let page = getCurrentPages().pop(); //跳转页面成功之后
							if (!page) return;
							// page.loadData(); //如果页面存在，则重新刷新页面
							console.log("触发页面刷新");
							// #endif 
						}
					});
				}


			},
			bindPickerChange(e) {

				console.log("查看参数", e.target.value);
				this.courseIndex = e.target.value;
				this.updateCourse(this.courseIndex, this.resCopy)
			}

		}
	}
</script>

<style>
	.content {
		/* 这是指定布局为flex */
		display: flex;
		/* 这是指定布局排列方式 */
		flex-direction: column;

		min-height: 100vh;
		/*100vh == height:100%,元素撑开与屏幕等高*/
	}

	#contentView {
		flex: 1;

	}

	#buttomNavigation {
		width: 100%;
		height: 30px;
		border: 1px solid black;
		display: flex;
		flex-direction: row;
		display: flex;
	}

	.propertyBox {
		flex-flow: row;
		justify-content: flex-start;
		display: flex;
	}


	.nav {
		flex: 1;
		/*等分*/
		border: 1px solid red;
		font-size: 14px;
	}


	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
</style>